<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" />
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
    <link rel="stylesheet" href="style/main.css" />
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <title>Profile</title>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>

  <div class="container-fluid" id="new-projects">
    <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #1F85DE;">
      <a class="navbar-brand" href="main.html">
          <img src="https://iconsplace.com/wp-content/uploads/_icons/000000/256/png/death-star-icon-256.png"
              width="27" height="27" class="d-inline-block align-top" alt="" />
          DeathStar
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <form class="form-inline my-4 my-lg-0 col-md-6 offset-md-2">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"
                  id="input_user_name">
              <button class="btn btn-success my-2 my-sm-0" type="submit">
                  Search
              </button>
          </form>

          <ul class="navbar-nav col-md-4">
              <li class="nav-item">
                  <a class="nav-link text-white" href="#" id="show-post">
                      <i class="fas fa-edit"></i>
                      Post </a>
              </li>

              <li class="nav-item">
                  <a class="nav-link text-white" href="contact.html">
                      <i class="fas fa-users"></i>
                      Contacts</a>
              </li>

              <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle text-white user-name" href="#" id="navbarDropdown"
                      role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="fas fa-user"></i>
                      <div id="username" style="display: inline;"></div>
                  </a>

                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="./profile.html">Profile & Setting</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item text-danger" onClick="logout();">Logout</a>
                  </div>
              </li>
          </ul>
      </div>
  </nav>
  </div>
  <div class="container">
    <div class="container gedf-wrapper">
      <div class="row">
        <div class="col-sm-4">
          <div class="container gedf-wrapper">
            <div class="row">
              <div class="col-sm-12">
                <img src="https://picsum.photos/310/310" class="img-fluid rounded" alt="Responsive image" />
              </div>
            </div>

            <div class="row">
              <div class="col-sm-12">
                <div class="card mt-3">
                  <div class="card-header">
                    <h4 class="d-inline-flex ">
                      About
                    </h4>
                    <a href="#" class="d-inline-flex float-right">Edit</a>
                  </div>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                      <span class="text-muted">User Name:</span>
                      <div id="mentioned_user" style="display:inline"></div>
                    </li>
                    <li class="list-group-item">
                      <span class="text-muted">Gender:
                      </span>
                      Male
                    </li>
                    <li class="list-group-item">
                      <span class="text-muted">Phone:
                      </span>
                      +1(123)456-7890
                    </li>
                    <li class="list-group-item">
                      <span class="text-muted">Address:
                      </span>
                      <br />
                      100 Campus Rd. <br />
                      Ithaca, NY, 14850
                    </li>
                    <li class="list-group-item">
                      <span class="text-muted">Email:
                      </span>
                      sample@email.com
                    </li>

                  </ul>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-sm-12">
                <div class="card mt-3">
                  <div class="card-header">
                    <h4 class="d-inline-flex ">
                      Setting
                    </h4>
                  </div>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                      <span class="text-muted">Password:</span>
                      <a href="#">Change Password</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

          </div>
        </div>

        <div class="col-sm-8">
          <div class="container-fluid gedf-wrapper">
            <div class="row">

              <div class="col-md-12" id='compose'>
                <h2 class="text-center">Create post</h2>

                <div class="form-group">
                  <textarea id="post-content" rows="8" class="form-control" name="description"></textarea>
                </div>
                <form id="media-form" method="POST" enctype="multipart/form-data">
                  <label for="media">Choose images/videos to upload</label>
                  <input type="file" id="media" name="media" placeholder="Add photo/video" accept="image/*, video/*"
                    multiple />
                </form>

                <div class="submit-button">
                  <button id="create-post" type="submit" class="btn btn-primary" onClick="clickEvent();">
                    Create
                  </button>
                  <button id="hide-post" type="button" class="btn btn-default">
                    Cancel
                  </button>
                </div>
              </div>

              <div class="col-md-12 gedf-main">
                <div id="card-block">
                  <!--- One Post Start -->
                  <div class="card gedf-card post-card">
                    <div class="card-header">
                      <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex justify-content-between align-items-center">
                          <div class="mr-2">
                            <img class="rounded-circle" width="45" src="https://picsum.photos/50/50" alt="" />
                          </div>
                          <div class="ml-2">
                            <div class="h5 m-0 post-creator">Welcome to DeathStar!</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="card-body">
                      <div class="text-muted h7 mb-2 post-time">
                        <i class="fa fa-clock-o post-time"></i>
                      </div>

                      <p class="card-text post-text">
                        You have not post anything yet
                      </p>
                      <img class="post-img" src="">
                    </div>
                    <div class="card-footer post-footer">
                      <a href="#" class="card-link"><i class="fa fa-gittip"></i>Like</a>
                      <a href="#" class="card-link"><i class="fa fa-comment"></i> Comment</a>
                      <a href="#" class="card-link"><i class="fa fa-mail-forward"></i> Share</a>
                    </div>
                  </div>
                  <!-- One Post End -->
                </div>

              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <script type="text/javascript" src="./javascript/create-post.js"></script>
  <script type="text/javascript" src="./javascript/timeline.js"></script>
  <script>
    if (window.location.href.split("=")[1] == null || localStorage.getItem("username") == null) {
      showTimeline("user-timeline");
    }
    else if (localStorage.getItem("username").localeCompare(window.location.href.split("=")[1]) != 0) {
      show_Mentioned_User_Timeline((window.location.href.split("=")[1]).replace("%20"," "));
    }
    else {
      showTimeline("user-timeline");
    }
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
</body>

</html>